<template>
    <ContentField>
        <div class="row row justify-content-md-center">
      <div class="col-3">
        <form @submit.prevent="register">
          <div class="mb-3">
            <label for="username" class="form-label">用户名</label>
            <input v-model="username" type="text"  class="form-control" id="username"  placeholder="请输入用户名"/>
          </div>
          <div class="mb-3">
            <label for="password" class="form-label">密码</label>
            <input v-model="password" type="password"  class="form-control" id="password"  placeholder="请输入密码"/>
          </div>
          <div class="mb-3">
            <label for="confirmedPassword" class="form-label">确认密码</label>
            <input v-model="confirmedPassword" type="password"  class="form-control" id="confirmedPassword"  placeholder="请再次输入密码"/>
          </div>
          <div type="error" class="error_message">{{error_message}}</div>
          <button type="submit" class="btn btn-primary">注册</button>
        </form>
      </div>
    </div>
    </ContentField>
</template>

<script>
import ContentField from '../../../components/ContentField.vue'
import { ref } from 'vue'
import router from '../../../router/index'
import $ from 'jquery'

export default{
    components:{
        ContentField
    },
    setup(){
        let username = ref('');
        let password = ref('');
        let confirmedPassword = ref('');
        let error_message = ref('');
        const register = () =>{
        $.ajax({
            url:"http://127.0.0.1:3000/api/user/account/register",
            type:'post',
            data:{
              username:username.value,
              password:password.value,
              confirmedPassword:confirmedPassword.value
            },
            success(res){
              if(res.error_message === '注册成功'){
                router.push({name:'user_login_index'});
              }else{
                error_message.value = res.error_message;
              }
            },
            error(res){
                error_message.value = res.error_message;
            }
          });
        }

        return{
            username,
            password,
            confirmedPassword,
            error_message,
            register
        }
    }
}
</script>

<style scoped>
button{
  width: 100%;
}
div.error_message{
  color: red;
}
</style>